<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .container {
        width: 1000px;
        height: 600px;
        margin: 50px auto;
        .left-img {
          position: relative;
          display: inline-block;
          width: 450px;
          height: 450px;
          background-image: url("./images/imgA_2.jpg");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          background-color: rgb(245, 235, 221);
          .mask {
            width: 230px;
            height: 230px;
            background-image: url("./images/bg.png");
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }
        .right-img {
          display: inline-block;
          width: 450px;
          height: 450px;
          /* background-color: cadetblue; */
          background-image: url("./images/imgA_3.jpg");
          background-repeat: no-repeat;
        }
        .img-list-wrapper {
          width: 450px;
          height: 100px;
          /* background-color: blueviolet; */
          text-align: center;
          .img-list {
            /* background-color: aqua; */
            li {
              display: inline-block;
              width: 60px;
              height: 60px;
              margin: 0 5px;
              background-image: url("./images/imgA_1.jpg");
              /* border: 2px solid #000; */
            }
          }
        }
      }
    </style>
  </head>
  <body>
    <!-- 最外层容器 -->
    <div class="container">
      <!-- 左侧原图 -->
      <div class="left-img">
        <!-- 遮罩层 -->
        <div class="mask"></div>
      </div>
      <!-- 右侧大图 -->
      <div class="right-img"></div>
      <!-- 缩略图 -->
      <div class="img-list-wrapper">
        <ul class="img-list"></ul>
      </div>
    </div>

    <script>
      window.onload = function () {
        // 图片数据
        var imgs = {
          sm: ["imgA_1.jpg", "imgB_1.jpg", "imgC_1.jpg"],
          md: ["imgA_2.jpg", "imgB_2.jpg", "imgC_2.jpg"],
          lg: ["imgA_3.jpg", "imgB_3.jpg", "imgC_3.jpg"],
        };

        // DOM查询工具函数封装
        const $ = (selector) => document.querySelector(selector);
        const $$ = (selectAll) => document.querySelectorAll(selectAll);

        // 获取需要用到的DOM对象
        var container = $(".container");
        var leftImg = $(".left-img");
        var mask = $(".mask");
        var rightImg = $(".right-img");
        var imgListWrapper = $(".img-list-wrapper");
        var imgList = $(".img-list");

        // 第一步渲染底部小图
        imgs.sm.forEach((src) => {
          const smLi = document.createElement("li");
          smLi.style.backgroundImage = `url('./images/${src}')`;
          imgList.appendChild(smLi);
        });

        // 默认边框
        imgList.children[0].style.border = "2px solid #000";
        imgList.addEventListener("click", function (e) {
          // 判断点击的是li
          if (e.target.tagName.toUpperCase() == "LI") {
            // 去除所有的样式
            for (let j = 0; j < imgList.children.length; j++) {
              imgList.children[j].style.border = "none";
            }
            // 点击谁谁加边框
            e.target.style.border = "2px solid #000";
          }
          //查找点击元素的索引
          var selectIndex = Array.from(imgList.children).indexOf(e.target);
          //若点击的不是li  会返回-1
          if (selectIndex !== -1) {
            leftImg.style.backgroundImage = `url('./images/${imgs.md[selectIndex]}')`;
            rightImg.style.backgroundImage = `url('./images/${imgs.lg[selectIndex]}')`;
          }
        });

        // --------------------------------------------------------------
        // 鼠标移入遮罩动
        leftImg.addEventListener("mousemove", function (e) {
          mask.style.opacity = "1";
          var left = e.clientX - leftImg.offsetLeft - mask.offsetWidth / 2;
          // console.log(left);
          var top = e.clientY - leftImg.offsetTop - mask.offsetHeight / 2;
          if (left <= 0) left = 0;
          if (top <= 0) top = 0;
          if (left > leftImg.offsetWidth - mask.offsetWidth)
            left = leftImg.offsetWidth - mask.offsetWidth;
          if (top > leftImg.offsetHeight - mask.offsetHeight)
            top = leftImg.offsetHeight - mask.offsetHeight;
          mask.style.left = left + "px";
          mask.style.top = top + "px";

          rightImg.style.backgroundPositionX = -2 * left + "px";
          rightImg.style.backgroundPositionY = -2 * top + "px";
        });

        leftImg.addEventListener("mouseleave", function () {
          mask.style.opacity = "0";
        });
      };
    </script>
  </body>
</html>
